<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened }">
    <div class="default-header">
        <div class="row">
            <h1 class="col">VirtualBox VM configuration</h1>
        </div>
    </div>
    <div class="default-content" *ngIf="virtualBoxTemplate">
        <mat-accordion>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        General settings
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <form [formGroup]="generalSettingsForm">
                    <mat-form-field class="form-field">
                        <input matInput formControlName="templateName" type="text" [(ngModel)]="virtualBoxTemplate.name" placeholder="Template name">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input matInput formControlName="defaultName" type="text" [(ngModel)]="virtualBoxTemplate.default_name_format" placeholder="Default name format">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input matInput formControlName="symbol" type="text" [(ngModel)]="virtualBoxTemplate.symbol" placeholder="Symbol">
                    </mat-form-field>
                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
                    <mat-form-field class="form-field">
                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="virtualBoxTemplate.category">
                            <mat-option *ngFor="let category of categories" [value]="category[1]">
                                {{category[0]}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-form-field class="select">
                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Console type" [(ngModel)]="virtualBoxTemplate.console_type">
                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
                                {{type}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="virtualBoxTemplate.console_auto_start">
                        Auto start console
                    </mat-checkbox>
                    <mat-form-field class="form-field">
                        <input matInput formControlName="ram" type="number" [(ngModel)]="virtualBoxTemplate.ram" placeholder="RAM">
                        <span matSuffix>MB</span>
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="On close" [(ngModel)]="virtualBoxTemplate.on_close">
                            <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
                                {{option[0]}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </form>
                <mat-checkbox [(ngModel)]="virtualBoxTemplate.headless">
                    Start VM in headless mode
                </mat-checkbox><br/>
                <mat-checkbox [(ngModel)]="virtualBoxTemplate.linked_clone">
                    Use as a linked base VM (experimental)
                </mat-checkbox>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Network
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <form [formGroup]="networkForm">
                    <mat-form-field class="form-field">
                        <input formControlName="adapters" matInput type="number" [(ngModel)]="virtualBoxTemplate.adapters" placeholder="Adapters">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="virtualBoxTemplate.first_port_name" placeholder="First port name">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input formControlName="nameFormat" matInput type="text" [(ngModel)]="virtualBoxTemplate.port_name_format" placeholder="Name format">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input formControlName="size" matInput type="number" [(ngModel)]="virtualBoxTemplate.port_segment_size" placeholder="Segment size">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Type" [(ngModel)]="virtualBoxTemplate.adapter_type">
                            <mat-option *ngFor="let type of networkTypes" [value]="type">
                                {{type}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </form>
                <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
                <mat-checkbox [(ngModel)]="virtualBoxTemplate.use_any_adapter">
                    Allow GNS3 to use any configured VirtualBox adapter
                </mat-checkbox>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Usage
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-form-field class="form-field">
                    <textarea matInput type="text" [(ngModel)]="virtualBoxTemplate.usage"></textarea>
                </mat-form-field>
            </mat-expansion-panel>
        </mat-accordion>
        <div class="buttons-bar">
            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
        </div>
    </div>
</div>
<app-custom-adapters 
    [hidden]="!(isConfiguratorOpened && virtualBoxTemplate)" 
    #customAdaptersConfigurator
    [networkTypes]="networkTypes" 
    [displayedColumns]="displayedColumns"
    (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
    (saveConfigurationEmitter)="saveCustomAdapters($event)"
></app-custom-adapters>
<app-symbols-menu 
    *ngIf="isSymbolSelectionOpened && virtualBoxTemplate" 
    [server]="server" 
    [symbol]="virtualBoxTemplate.symbol" 
    (symbolChangedEmitter)="symbolChanged($event)"
></app-symbols-menu>
